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INTRODUCTION 

Ul is always the first thing a player will see, and yet it’s often the last thing a developer thinks 
about. Just like the opening credits for a movie, the Ul can help to set the mood for the rest of 
the game, for better or worse. If a game has a Ul that looks bland, or is difficult to use, how 
will that impact a player’s first impressions of the rest of the game? 



FROM PC TO CONSOLE 

Whether you’re converting a PC game to console or developing an original console title, the 
PC is always going to be a major part of the production pipeline. This section will illustrate 
some of the major differences between consoles and computers. 


The Display: What You See May Not Be What You Get 

Content on the PC can look very different once it’s on a console. It’s important to understand 
the differences between the displays used for PCs and consoles. 


Computer Game Display 


Console Game Displays 



CRT Computer Monitors most 
commonly used by gamers 
Variable Resolution: Typically 
between 640x480 - 1280x1024 
Progressive (Every line drawn) 

1 7”- 19" in size (typically) 

Small Dot Pitch 

Consistent screen area(same for 
all models and brands) 

Crisp and clear display: meant to 
be viewed up close 



CRT Televisions most commonly used by gamers 
Fixed Low Resolution: 640x480(typically) 

Interlaced (Every other line drawn) 

19”-36” in size (typically) 

Large Dot Pitch 

Variable screen area (different for every model and brand) 
Fuzzy and blurry: meant to be viewed from a distance 


The Tech Behind The “Tube” 


TVs use electron guns to shoot tight beams of electrons onto the screen from within a 
vacuum tube. The screen is coated with phosphor, which glows where it gets hit by the 
beam. 



Q20D0 HOW S-PJFFIVQRKS 


There are a lot of things that could go wrong in 
getting a contraption like this to shoot straight. 


To draw the entire screen, magnetic coils move the electron beam in a "raster scan" 
pattern across and down the screen. The beam draws one line across the screen from left 
to right, then quickly flies back and down slightly, then paints another line, and so on down 
the screen, like this: 



Because the lines are spaced closely together, your brain integrates them into a single image. 
A TV screen normally has about 480 lines visible from top to bottom. 

Standard TVs draw at 60 frames per second using a technique called interlacing where only 
every other line is drawn for a single frame. The next frame will draw the lines not drawn in the 
previous frame, and the brain, once again, integrates them into a single image. 

Computer monitors, on the other hand, use a progressive technique that draws every line in a 
given frame. Progressive images require more sophisticated hardware, which is one of the 
reasons why monitors are more expensive than the average TV. 



What Happens When TVs Behave Badly 


Screen Distortion 

The pictures below, from the beta test of Jedi Academy (Xbox), show one of the distortions 
that can occur on televisions. 



This is what happens when you have a lot of electrons in one line of resolution and fewer in 
another. Electrons repel one another because of their like electrical charge. The brighter 
the color, the more electrons are being fired at the screen, which will mean more electrons 
repelling one another. The opposite is true of darker colors - fewer electrons repelling one 
another. Together these lines create screen-distortion. 

Suggestions: 

• Invest in a really cheap TV for distortion testing - the kind you get at a super market, 
not at Best Buy. 

• Avoid using bright and dark colors together, especially with thin and/or straight lines. 





Screen Legibility 


Text is such a common part of our daily lives that we rarely stop to notice just how complex it 
really is. Just think of how many polygons it would take to render a letter like “Q”. There is a 
reason why you never see “Books On TV” - you would go blind trying to read that much text on 
a TV. Televisions were never designed for reading text on screen. A console developer must 
always test for legibility of the Ul on a television, especially when concerning fonts. 

Concerning Fonts 

o The larger and thicker the text, the easier it will be to read. It’s better to have the 
player page down than to try and fit it all on one screen with a smaller font size, 
o Try to make all your letter characters the same size. That will make it easier to 
manage long text strings. 

o Avoid using lowercase letters as they are more difficult to read. Lowercase 
letters are also more difficult to manage since their sizes vary so much. Instead, 
try using smaller versions of uppercase letters, 
o Consider using an outline for the font. It may not look as clean, but it can go a 
long way towards making your text easier on the eyes. 


HUD Readouts in Jedi Academy (Xbox) 



Before 


After 



Over-Scanning 


TVs tend to over-scan their screen area, which means the picture on the screen is a little 
larger than the display. How much the TV over-scans varies from TV to TV. To 
compensate, console manufactures (e.g. Sony, Microsoft, Nintendo) require that the edges 
of the screen not contain any important information. That means things like a heads up 
display, dialog boxes and Ul elements must remain within the confines of a safe region. 
Sony, Microsoft, and Nintendo have different requirements, but none of them have 
restrictions on being too cautious. Microsoft requires that an Xbox title have a safe region 
that uses only the middle 85% of the screen (544x408) making it the most conservative. 
We have yet to find a TV that this safe region won’t compensate for. (Note: The safe 
region is different for HDTV) 

Jedi Knight: Jedi Academy 



The pictures above illustrate the impact the safe region (added outline) had on Jedi 
Academy. Note the difference it made to the HUD. 

A Note on Technical Requirements 

Games that do not meet manufacturers’ technical requirements (such as conforming to 
the safe region) are not allowed to be published. Manufacturers do grant exceptions, 
but generally not for any really significant violations. 




Input Devices 

“The keyboard and mouse give you near 
instant response and near exact control. The 
controller is a far less precise, far 
more. . . well. . . leisurely input device. ” 

- Warren Spector 

The Soft Keyboard 


Since no major console comes with a keyboard and some don’t even support them, console 
games rely on a software solution for text input. Console developers have taken many 
different approaches toward soft keyboard design. Microsoft, however, has done usability 
testing on the subject which showed that players overwhelmingly preferred a horizontal, 
alphabetic layout over other virtual keyboard designs. 



The picture above shows a soft keyboard design for an Xbox title that has a number of 
advantages: 

• Because the design resembles the look of an actual keyboard, people will instantly 
understand its purpose. 

• Arranging the letters alphabetically is faster since any literate gamer will know the order 
of the letters. (QWERTY is based on motor memory, not visual) 


• By splitting off the alphabet, symbols, and accents (for European languages) into three 
different keyboards, the user isn’t bombarded with a large number of choices to make. 
Having fewer keys also minimizes cursor travel. 

• Common functions such as “Done” (for accepting the entered text), Space, Backspace, 
Caps Lock, and switching between character sets are mapped to available buttons on 
the controller. 

• Assigning Space and Backspace to the left and right shoulder buttons creates a natural 
mapping (Space moves to the right, and backspace moves to the left). They are also 
easy to use simultaneously with the “A” button and thumbstick/D-pad. 


From Mouse to Controller 

On PC games, the player uses a mouse pointer to precisely select the item they want. On a 
console, however, the player has to use the D-pad or thumbstick to cycle through the entire 
menu until they get to the item they want. It is therefore very important to make the Ul menus 
as efficient as possible. Below are some guidelines to consider: 

• Make sure that anything you put in the Ul is absolutely necessary. Always ask if adding 
a particular Ul screen will add to the player’s enjoyment. 

• Avoid having a menu so long that all the items can’t fit on the screen and requires the 
player to scroll. 

• Absolutely make sure that menu navigation is fast, and when I say fast, I mean instant. 
Screen transition animations are one thing, but having to wait a second between each 
menu item is incredibly frustrating and totally unnecessary. 

• Use a cursor that blatantly draws attention to the currently selected menu item. 

• Try to keep your menus vertical and cyclic. 

o Vertical menus can fit around 6 to 8 buttons typically and, since each button 
appears on its own line, are easier to read, 
o Horizontal menus allow for fewer buttons and could prove a real pain when 
localizing in different languages. Another drawback is less distinction between 
menu items, since they are all on the same line, 
o A cyclic menu is one that allows the menu to loop. This can make navigation 
more efficient. 



THE DESIGN OF EVERYDAY USER INTERFACE 


Donald Norman’s The Design of Everyday Things is a must read for anyone that 
develops user interfaces. It points out things in our everyday environments that 
are poorly designed and don’t need to be. This book is all about designs that 
effect our every day lives such as doors that you push that actually have to be 
pulled or car stereos with the “mute” button right next to the “increase volume” 
button. This section will take a similar approach towards the design of a game’s 
user interface. 


Get a Clue! 

“The human mind is exquisitely tailored to make sense 
of the world. Give it the slightest clue and off it goes, 
providing explanation, rationalization, understanding. ” 

- Donald Norman 


DE/ISN 

EVERYDAY 

THING/ 



BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA' BLA BLA BLA BLA BLA BLA. 


(yellow) 


DO YOU WISH TO CONTINUE? 


(white) 


NO 



Here is a Ul problem that just about every gamer has faced once or twice: a menu with only 
two items and no clear explanation of which item is currently selected. Let’s break down the 
rationalizations a player might have when faced with a screen like this: 

• If the player is not familiar with console games, they may have no idea which button 
to press on the controller. 

• Since the two menu items are different colors, one of the items is selected and the 
other is not. 

• The yellow body text is different from the menu text, so no clues there. 

• The menu items are on top of one another, so the player can assume that the 
Directional Pad or thumbstick is pushed up and down rather than left and right. 

• When the player pushes up and down on the D-Pad, the colors of the menu items 
are swapped. 



• One of the words is in white so that could imply that it’s lit up. The other item is blue 
which could mean that it is off. But the reverse is just as likely. 

So the player is left with two options: scan the manual for more clues or press any button 
on the controller and hope for the best. 

The player presses the D-pad up, which makes “Yes” appear blue, and presses a button. 
The player ends up at the screen they were at previously. There was no feedback 
communicating that they moved back in the Ul stack (for example a unique sound effect), 
but the player knows it’s the previous screen because they remember what it looked like. 
With these clues they are able to deduce that white text is the selected item and blue is not. 
Now that the player understands the selection system, they get through the Ul with greater 
ease and start playing the game. 

In reality, this only took a few seconds to figure out, but it’s still irritating. It wouldn’t have 
taken all that much effort on the part of the Ul designer to correct this kind of confusion. 


Provide Instructions 


“One of the most important principles of design 
is visibility. The correct parts must be visible, 
and they must convey the correct message. ” 

- Donald Norman 


BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA BLA BLA BLA BLA BLA BLA. 

DO YOU WISH TO CONTINUE? 

YES 
NO 

XBOX A SELECT 


PS2 'X 
GCW A 


For starters, it would help to give the player some instruction on how to make a choice. 
Insert a callout that consists of a brief text string that explains its mapped function, and 
an icon of the button to which the function is mapped. The icon should represent the 
button in color and shape. For some consoles, this is a requirement. 



Provide Feedback 


“Feedback: sending back to the user 
information about what action has actually 
been done. Imagine trying to draw a picture 
with a pencil that leaves no mark: there would 
be no feedback. ” 

- Donald Norman 


BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA BLA BLA BLA BLA BLA BLA. 

DO YOU WISH TO CONTINUE? 

PS 2 'X 
GCN A 

XBOX A SELECT 



A cursor is an effect or collection of effects that are applied to the selected item that 
provides visual feedback to the player’s actions. In the original example of this Ul 
screen, the cursor’s only effect was a color swap of the text. This may work in menus of 
three or more items, but is ineffective in a menu with only two. A more refined cursor 
object, such as a glow effect and a shape that encompasses the text, is necessary. 

Sound effects are also excellent for providing additional feedback for the player’s 
actions. In addition don’t underestimate the power that good sound effects can have on 
the player’s enjoyment. 


The Credo of Errors 


“If an error is possible, someone will make it. Errors should be 
easy to detect, they should have minimal consequences, and, if 
possible, their effects should be reversible. ’’ 

- Donald Norman 

All major console manufacturers require that any destructive action, such as overwriting a 
game save, have a confirmation dialog to allow the player to back out of a potential mistake. 
However, there are other kinds of irreversible actions that can still hinder a player’s experience 
even if they are not as costly as losing a save game. 



This dialog is meant to toach you, 
the player, about a particular game 
mechanic that is not readily 
apparent. Since I don’t have enough 
space to fit everything on the screen 

1/2 © CONTINUE 


The example above shows an example of a training dialog that is meant to teach the player 
about a particular aspect of a game. The down arrow and page counter under the paragraph 
illustrate that there is a second page of information that the player can view by pressing down 
on the D-pad or thumbstick. Should the player press the “A” button, they will close the dialog 
box and miss the information on the second page. This design gives the player the ability to 
make this mistake. Below is an alternate approach to the same dialog that resolves this 
problem. 


This dialog is meant to teach you, 
the player, about a particular game 
mechanic that is not readily 
apparent. Since I don’t have enough 
space to fit everything on the screen 

1/2 © NEXT PAGE 


By binding the “A” button to move to the next page, in addition to the D-pad “down” button, it 
forces the player to see all the information, instead of closing the dialog and missing it. 


I will change the button to page 
down so that the user will see the 
rest of the instructions on as many 
pages as needed. 


2/2 


B BACK © CONTINUE 








Once the player has seen all the screens, the “A” button will now close the dialog and return to 
the game. Pushing up and pressing the “B” button allows the player to return to the previous 
page if neccessary. 


Confirmation Dialogs Don’t Have to be Menus 

Confirmation dialogs are a requirement for a number of situations, on all major consoles. The 
choices illustrated here are “Yes” and “No”. Another way to think of them is “Positive” and 
“Negative” or “On” and “Off”. These relationships are types of Booleans. 


PS2 & 


© PS2 

GCN O — YES 


NO — L? GCht 

Xbox £1 


© Xbox 


Most games map the same buttons for moving forward and back in the Ul stack and some 
consoles require it. Therefore it’s conceivable that in the player’s mind, these buttons are for 
“positive” and “negative” actions. Ul designers can take advantage of these associations as 
illustrated in the example below. 


BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
BLA BLA BLA BLA BLA BLA BLA BLA BLA. (yellow) 

DO YOU WISH TO CONTINUE? 


©YES b NO 


Rather than making the player press the D-pad to move a cursor to select their choice and 
then press a button, they just press a single button. 




Break Things Down 


It’s important to keep the Ul stack short, but it’s just as important not to bombard the player 
with information. Trying to fit too much information on one screen can give a player mental 
indigestion. A common example of this problem is the controller mapping screen. Numerous 
games have functions mapped to every available button and try to fit it all on one screen. The 
example below shows a controller mapping for a first person shooter game that is broken down 
into two separate screens. 




Advantages 

o Plenty of text breathing room for 
localization. 

o The button icons are right next 
to their function instead of the 
function pointing to a button. 

o Button Icons pointing to the 
controller help to establish 
mappings. 

o Less information overload. 


Advantages 

o By separating the thumb-stick 
movement functions from the 
button functions, there will be no 
confusion with the thumb-stick 
buttons found on PS2 and Xbox 
controllers. 

o Plenty of breathing room for text 
localization 

o Less information overload. 







FINAL THOUGHTS 


Keep It Simple Stupid 

While it’s true that a good looking user interface is important, it should hardly be the 
focus of your technology. A Ul is not an effective tech demo. A minimalist approach 
toward Ul design allows the player to focus on the function, without getting distracted by 
the form. 

Make It FUN!!! 

Think of the opening credits for a movie. They tell the audience who did what in the 
movie, but filmmakers learned that it’s also an opportunity to entertain the audience and 
set the mood for the rest of the film. If the player has fun with the user interface, it will 
only enhance their overall enjoyment when playing the game. 
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